<template>
  <div id="playList">
    <table>
       <caption>
         <div>
           <h1><i class="el-icon-s-fold wyred"></i>搜索列表</h1>
         </div>
       </caption>
        <thead>
            <tr>
            <th>歌名</th>
            <th>歌手</th>
            <th>播放</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item , index) in songs" :key="index">
                <td v-text="item.name"></td>
                <td v-text="item.artists[0].name"></td>
                <td><i class="el-icon-video-play" @click="play(item)"></i></td>
            </tr>
        </tbody>
    </table>
  </div>
</template>
<script>
import { mapState } from "vuex"
export default {
  computed: {
    ...mapState(["songs"])
  },
  methods: {
       play(item){
        var arts=[]
        item.artists.forEach(ele=>{arts.push(ele.name)})
        this.$store.commit('chang', item.id)
    }  
  },
};
</script>
<style>
  .wyred{
    color: #C20C0C;
  }
  #playList{
    background-image: linear-gradient(to bottom right,#242424,rgb(95, 7, 7));
    color:#ccc;
  }
  #playList>table{
    width: 980px;
    margin: 0 auto;
    border-collapse:collapse;
    border: 2px solid #242424;
  }
  #playList>table td{
    text-align: center;
    padding: 10px 0;
  }
  #playList caption{
    padding: 20px;
    padding-bottom: 2px;
    text-align:left;
    border-top:5px  #C20C0C;
    border-style: solid none;
  }
  #playList tr,#playList th{
     padding: 10px 0;
  }
  
  #playList .el-icon-video-play{
    color: #C20C0C;
    font-size: 20px;
  }
  #playList tbody tr:nth-child(even){
    background: rgb(41, 41, 38);
  }
  #playList tbody tr:nth-child(odd){
    background: #242424;
  }
</style>